<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>我的购物车</title>
    <link rel="icon" href="${pageContext.request.contextPath}/resources/img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/css/all.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/css/pages-cart.css"/>

    <script type="text/javascript">
        function getSum() {
            var listSize = "${fn:length(productList)}";//4
            for (var i = 1; i <= listSize; i++) {//1 ,2 ,3 ,4
                var sum = document.getElementById("sum" + i);//sum1 sum2
                var price = parseInt(document.getElementById("price" + i).innerText);//price1 price2
                var numbers = parseInt(document.getElementById("numbers" + i).value);//number1 number2
                //sum1 = price1 * number1 第一行
                //sum2 = price2 * number2 第一行
                sum.innerHTML = price * numbers;
            }
        }

        //删除购物车
        function delCart(rowid) {// rowid = 1 rowid = 2 rowid = 3 rowid = 4
            //拿到每行的商品id的值
            var pid = document.getElementById("pid" + rowid).value;
            location.href = "${pageContext.request.contextPath}/cart/delCart?cid=${sessionScope.customer.cid}&productId=" + pid;
        }

    </script>
</head>

<body onload="getSum()">
<!--head-->
<!-- 头部栏位 -->
<!--页面顶部-->
<div id="nav-bottom">
    <!--顶部-->
    <div class="nav-top">
        <div class="top">
            <div class="py-container">
                <div class="shortcut">
                    <ul class="fl">
                        <li class="f-item">宅客欢迎您！</li>
                        <li class="f-item">
                            <c:if test="${not empty sessionScope.customer}">
                           <span>
                              ${sessionScope.customer.cname}
                              <a href="${pageContext.request.contextPath}/customer/logout">&nbsp;退出</a>
                           </span>
                            </c:if>
                            <c:if test="${empty sessionScope.customer}">
                                请
                                <span>
                           <a href="login.jsp">登录</a>
                           </span>
                            </c:if>
                            <span>
                                <a href="register.jsp">免费注册</a>
                            </span>
                            <span><a href="${pageContext.request.contextPath}/index.jsp"
                                     style="color: #2b2b2b">首页</a></span>
                        </li>
                    </ul>
                    <div class="fr typelist">
                        <ul class="types" style="margin-left: 390px;">
                            <li class="f-item"><span><a href="#" style="color: #2b2b2b">我的订单</a></span>
                            </li>
                            <li class="f-item"><span><a href="${pageContext.request.contextPath}/cart/getCart"
                                                        style="color: #2b2b2b">我的购物车</a></span></li>
                            <li class="f-item"><span><a href="${pageContext.request.contextPath}/center/index"
                                                        style="color: #2b2b2b">我的宅客</a></span>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>

        <!--头部-->
        <div class="header">
            <div class="py-container">
                <div class="yui3-g Logo">
                    <div class="yui3-u Left logoArea">
                        <a class="logo-bd" title="宅客" href="${pageContext.request.contextPath}/index.jsp">宅客</a>
                    </div>
                    <div class="yui3-u Rit searchArea">
                        <div class="search">
                            <form action="" class="sui-form form-inline">
                                <!--searchAutoComplete-->
                                <div class="input-append">
                                    <input id="autocomplete" type="text" class="input-error input-xxlarge"/>
                                    <button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>


<div class="cart py-container">
    <!--All goods-->
    <div class="allgoods">
        <h4>全部商品<span></span></h4>
        <div class="cart-main">
            <div class="yui3-g cart-th">
                <div class="yui3-u-1-4">商品</div>
                <div class="yui3-u-1-8">单价（元）</div>
                <div class="yui3-u-1-8">数量</div>
                <div class="yui3-u-1-8">小计（元）</div>
                <div class="yui3-u-1-8">操作</div>
            </div>
            <div class="cart-item-list">
                <div class="cart-body">
                    <c:forEach items="${productList}" var="product" varStatus="i">
                        <div class="cart-list">
                            <ul class="goods-list yui3-g">
                                <li class="yui3-u-6-24">
                                    <div class="good-item">
                                        <div class="item-img"><img
                                                src="${pageContext.request.contextPath}/resources/image_big/${product.image}"/>
                                        </div>
                                        <div class="item-msg">${product.content}</div>
                                    </div>
                                </li>
                                <li class="yui3-u-1-8"><span class="price" id="price${i.count}">${product.price}</span>
                                </li>
                                <li class="yui3-u-1-8">
                                    <a href="javascript:void(0)" class="increment mins">-</a>
                                    <input autocomplete="off" type="text" id="numbers${i.count}"
                                           value="${product.number}" minnum="1" class="itxt"/>
                                    <a href="javascript:void(0)" class="increment plus">+</a>
                                </li>
                                <li class="yui3-u-1-8"><span class="sum" id="sum${i.count}"></span></li>
                                <li class="yui3-u-1-8">
                                    <input type="hidden" id="pid${i.count}" value="${product.id}">
                                    <a href="#" id="del${i.count}" onclick="delCart(${i.count})">删除</a><br/>

                                </li>
                            </ul>
                        </div>
                    </c:forEach>


                </div>
            </div>
        </div>
        <div class="cart-tool">
            <div class="money-box">
                <div class="sumprice">
                    <span><em>总价（不含运费） ：</em><i class="summoney">¥16283.00</i></span>
                </div>
                <div class="sumbtn">
                    <a class="sum-btn" href="order.html" style="background: #f19f0b">结算</a>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>

        <!--页面底部-->
        <div class="clearfix footer">
            <div class="py-container">
                <div class="footlink">
                    <div class="Mod-copyright">
                        <ul class="helpLink">
                            <li>关于我们<span class="space"></span></li>
                            <li>联系我们<span class="space"></span></li>
                            <li>关于我们<span class="space"></span></li>
                            <li>商家入驻<span class="space"></span></li>
                            <li>营销中心<span class="space"></span></li>
                            <li>友情链接<span class="space"></span></li>
                            <li>关于我们<span class="space"></span></li>
                            <li>营销中心<span class="space"></span></li>
                            <li>友情链接<span class="space"></span></li>
                            <li>关于我们</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

</html>